﻿<DemoContainer>
    <ApexChart TItem="Order"
               Title="Order Net Value"
               Options=options>

        <ApexPointSeries TItem="Order"
                         Items="Orders"
                         Name="Gross Value"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
                         SeriesType="SeriesType.Bar" />

        <ApexPointSeries TItem="Order"
                         Items="Orders"
                         Name="Net Value"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
                         SeriesType="SeriesType.Bar" />
    </ApexChart>
</DemoContainer>

@code {
    private List<Order> Orders { get; set; } = SampleData.GetOrders();
    private ApexChartOptions<Order> options { get; set; } = new();

    protected override void OnInitialized()
    {
        options.Xaxis = new XAxis
            {
                Group = new XAxisGroups
                {
                    Style = new XAxisGroupStyle { FontSize = "20px" },
                    Groups = new List<XAxisGroup> {
                        new XAxisGroup { Title = "Group 1", Cols = 2 },
                        new XAxisGroup { Title = "Group 2", Cols = 2 }
                    }
                }
            };

        options.Legend = new Legend { Position = LegendPosition.Top };

    }

}
